import './Home.less';
import Visit from './Visit/Visit';
import { Row, Col, Tabs } from 'antd';
import { findOrder } from '../..//Api/Api';
import { useState, useEffect } from 'react';
import moment from 'moment';
const { TabPane } = Tabs;
export default function Home() {
  const [length, setLength] = useState(0);
  const [sum, setSum] = useState(0);
  const [newTime, setNewTime] = useState('');
  const [unitPrice, setUnitPrice] = useState<any>(0);
  const [visitor, setVisitor] = useState(107);
  function callback(key: any) {
    console.log(key);
    findOrder({ where: { time: key } }).then((res) => {
      console.log(res, 123);
      let sum = 0;
      res.data.map((item) => {
        sum += item.totalOrder;
      });
      setLength(res.data.length);
      setSum(sum);
      setVisitor(50);
      if (res.data.length == 0 && sum == 0) {
        setUnitPrice(0);
      } else {
        setUnitPrice((sum / res.data.length).toFixed(2));
      }
      let startTime = moment(new Date()).format('yyyy-MM-DD hh:mm:ss');
      setNewTime(startTime);
    });
  }
  useEffect(() => {
    findOrder({}).then((res) => {
      console.log(res, 123);
      let sum = 0;
      res.data.map((item) => {
        sum += item.totalOrder;
      });
      setLength(res.data.length);
      setSum(sum);
      if (res.data.length == 0 && sum == 0) {
        setUnitPrice(0);
      } else {
        setUnitPrice((sum / res.data.length).toFixed(2));
      }
      let startTime = moment(new Date()).format('yyyy-MM-DD hh:mm:ss');
      setNewTime(startTime);
    });
  }, []);
  return (
    <div className="DataIndex">
      {/* 模块化数据分析 */}
      <Row className="DataIndexModule">
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={24}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleTitle">
              <div className="title">经营概况</div>
              <div className="nav">
                <Tabs defaultActiveKey="0" onChange={callback}>
                  <TabPane tab="实时" key="0" />
                  <TabPane tab="昨日" key="1" />
                  <TabPane tab="近7天" key="7" />
                  <TabPane tab="近30天" key="30" />
                </Tabs>
              </div>
              <div>更新时间: {newTime}</div>
            </div>
            <div className="flex">
              <div>
                <div>今日订单量</div>
                <div className="word">{length}</div>
              </div>
              <div>
                <div>今日支付金额</div>
                <div className="word">￥{sum}</div>
              </div>
              <div>
                <div>今日访客数</div>
                <div className="word">{visitor}</div>
              </div>
              <div>
                <div>今日客单价</div>
                <div className="word">￥{unitPrice}</div>
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={12}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListName">待处理事项</div>
            <div className="flex">
              <div>
                <div>今日订单量</div>
                <div className="word">{length}</div>
              </div>
              <div>
                <div>今日支付金额</div>
                <div className="word">{sum}</div>
              </div>
              <div>
                <div>今日访客数</div>
                <div className="word">{visitor}</div>
              </div>
            </div>
          </div>
        </Col>
        <Col
          xs={24}
          sm={24}
          md={12}
          lg={8}
          xl={12}
          style={{ padding: '15px', boxSizing: 'border-box' }}
        >
          <div className="DataIndexModuleList">
            <div className="DataIndexModuleListName">常用功能</div>
            <div className="flex">
              <div>
                <a href="/home">
                  <div>
                    {' '}
                    <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                  <div className="title">发布商品</div>
                </a>
              </div>
              <div>
                <a href="home/orderList">
                  <div>
                    {' '}
                    <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                  <div className="title">订单管理</div>
                </a>
              </div>
              <div>
                <a href="home/distribution">
                  <div>
                    {' '}
                    <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
                  </div>
                  <div className="title">打单发货</div>
                </a>
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <div className="DataIndexBlock">
        {/* 内容区域 */}
        <div className="DataIndexBlockChar">
          <Visit />
        </div>
      </div>
    </div>
  );
}
